<div class="table">
	<base href="<?php echo base_url() ?>" />

	<!--<link type="text/css" rel="stylesheet" href="css/demo_table.css" />-->
	<div id="ajaxLoadAni" class="newAni">
		<img src="file/smooth/images/ajax-loader.gif" alt="Ajax Loading Animation" />
		<span>Loading...</span>
	</div>
	
	<!-- <table id="records" class="newRecords">
		<thead>
			<tr>
					<th width="1">No</th>
					<th>Agent ID</th>
					<th>Agent Name</th>
					<th>Address</th>
					<th>Image</th>
					<th>Valid Status</th>
					<th>Actions</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table> -->

    <table id="records" class="newRecords">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>

	
	<!-- delete confirmation dialog box -->
	<div id="delConfDialog" title="Confirm">
		<p>Are you sure?</p>
	</div>
	<!-- message dialog box -->
	<div id="msgDialog"><p></p></div>

</div>
<!--
<script type="text/template" id="readTemplate" class="newTemplate">
        <tr id="${agent_id}">
                <td width="30px">${nomor}</td>
				<td>${agent_id}</td>
				<td>${agent_name}</td>
                <td>${agent_address}</td>
                <td>${image_path}</td>
				<td><img src="<?php echo base_url().'/file/images/'?>${file_name}"/></td>
                <td width="110px"><?=$menu['new']?></td>
        </tr>
</script> -->

<script type="text/javascript">
var readUrlNew   = 'index.php/act_agents/read/new',
    //updateUrlNew = 'index.php/master/agents/update',
   // delUrlNew    = 'index.php/act_agents/delete/primer',
    //viewUrlNew    = 'index.php/act_agents/view',
//	approveUrlNew = 'index.php/master/agents/approve',
//	rejectUrlNew = 'index.php/act_agents/delete/primer',
    delHref,
    updateHref,
    updateId;

$( document ).ready( function() {
	
    readAgentsNew();
    
	$( '#msgDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'Ok': function() {
                $( this ).dialog( 'close' );
            }
        }
    });
    
    $( '#delConfDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'No': function() {
                $( this ).dialog( 'close' );
            },
            'Yes': function() {
                //display ajax loader animation here...
                $( '.newAni' ).fadeIn( 'slow' );
                $( this ).dialog( 'close' );
                $.ajax({
                    url: delHref,
                    success: function( response ) {
                        //hide ajax loader animation here...
                        $( '.newAni' ).fadeOut( 'slow' );
                        
                        $( '#msgDialog > p' ).html( response );
                        $( '#msgDialog' ).dialog( 'option', 'title', 'Success' ).dialog( 'open' );
                        
                       /* $( 'a[href=' + delHref + ']' ).parents( 'tr' )
                        .fadeOut( 'slow', function() {
                            $( this ).remove();
                        });*/
                        
                    } //end success
                });
            } //end Yes
        } //end buttons
    }); //end dialog
    
    
    $( '.newRecords' ).delegate( 'a.deleteBtn', 'click', function() {
        delHref = $( this ).attr( 'href' );
        $( '#delConfDialog' ).dialog( 'open' );
            return false;
    }); //end delete delegate
    // --- Create Record with Validation ---
    
}); //end document ready


// function readAgentsNew() {
//     //display ajax loader animation
// 	$( '.newAni' ).fadeIn( 'slow' );
    
//     $.ajax({
//         url: readUrlNew,
//         dataType: 'json',
//         success: function( response ) {
			
//             var j=1;
// 			for( var i in response ) {
//                 response[ i ].rejectLink = rejectUrlNew + '/' + response[ i ].agent_id;
//                 response[ i ].approveLink = approveUrlNew + '/' + response[ i ].agent_id;
//                 response[ i ].updateLink = updateUrlNew + '/' + response[ i ].agent_id;
//                 response[ i ].deleteLink = delUrlNew + '/' + response[ i ].agent_id;
//                 response[ i ].viewLink = viewUrlNew + '/' + response[ i ].agent_id;
//                 response[ i ].file_name = ( isValid( response[ i ].lat, response[ i ].lon ) == 1 ) ? 'ok.png' : 'cancel.png';
// 				response[ i ].nomor = j;
//                 j++;
//             }
			
//             //clear old rows
//             $( '.newRecords > tbody' ).html( '' );
            
//             //append new rows
//             $( '.newTemplate' ).render( response ).appendTo( ".newRecords > tbody" );
            
//             //apply dataTable to #records table and save its object in dataTable variable
//             if( typeof dataTableNew == 'undefined' )
// 			{
//                 dataTableNew = $( '.newRecords' ).dataTable({
// 					"bJQueryUI": true
// 				});
// 			}
			
//             //hide ajax loader animation here...
//             $( '.newAni' ).fadeOut( 'slow' );
//         }
//     });
	
// }// end readUsers

function readAgentsNew()
{
    $('.newRecords').dataTable({
                "bJQueryUI": true, // aktifkan tampilan tabel JQueryUI
                "sAjaxSource": readUrlNew, //data source
                "sAjaxDataProp": "aaData", //variabel yg menampung data table
                "bServerSide": true, //serverside processing true
                "bProcessing": true, // tampilkan 'processing...' status saat data dipanggil
                //"sPaginationType": 'fullNumbers',
                "bPaginate": true,
                "aoColumns":[ //tentukan kolom pd tabel yg akan menampung value dari server
                    {"mDataProp": "agent_id", "sTitle": "Agent ID"}, 
                    {"mDataProp": "agent_name", "sTitle": "Agent Name"}, 
                    {"mDataProp": "agent_address", "sTitle": "Agent Address"}, 
                    {"mDataProp": "user_name", "sTitle": "Maintained By"},
                    {"mDataProp": "image_path", "sTitle": "Image"}
                ],
                "fnRowCallback": function(nRow, aaData, iDisplayIndex, iDisplayIndexFull) 
                {
                    // $(nRow).find('td').eq(-1).after('<a href="'+approveUrlNew+'/'+aaData[0]+'">Approve</a> |  <a href="'+updateUrlNew+'/'+aaData[0]+'">Edit</a> | <a href="'+delUrlNew+'/'+aaData[0]+'">Delete</a>'); //buat link action 
                    $(nRow).find('td').eq(0).before('<td>'+(parseInt(iDisplayIndex,10)+1+parseInt(dis))+'</td>'); //20120719 ayu
                    $(nRow).find('td').eq(-1).after('<?=$menu["new"]?>'); //buat link action 
                        var linkEditView = $(nRow).find('.viewBtnNew').attr("href")+aaData[0];
                        var linkEditEdit = $(nRow).find('.updateBtnNew').attr("href")+aaData[0];
                        var linkEditAprv = $(nRow).find('.approveBtnNew').attr("href")+aaData[0];
                        var linkEditRjct = $(nRow).find('.rejectBtnNew').attr("href")+aaData[0];

                        $(nRow).find('.viewBtnNew').attr("href",linkEditView);
                        $(nRow).find('.updateBtnNew').attr("href",linkEditEdit);
                        $(nRow).find('.approveBtnNew').attr("href",linkEditAprv);
                        $(nRow).find('.rejectBtnNew').attr("href",linkEditRjct);
                         
                    /*$(nRow).find('td').eq(4).each(function(){
                        $(this).html('<a href="<?=base_url();?>'+aaData[4]+'" target="_blank">click to see the image</a>');
                    });*/
                    $(nRow).find('td').eq(5).each(function(){   //20120719 ayu
                        $(this).html('<a href="<?=base_url();?>file/agent/'+aaData[4]+'" target="_blank">click to see the image</a>');
                    });

                    $.ajax({
                        url: "<?=base_url();?>index.php/act_agents/defoger",
                        type: "POST",
                        data: {'str' : aaData[0]},
                        success: function(response) {
                            /*$(nRow).find('td').eq(0).replaceWith(response);*/
                            $(nRow).find('td').eq(1).replaceWith(response); //20120719 ayu
                        }
                    });
                    
                    return nRow;
                }, //20120719 ayu
                
                "fnServerData": function ( sSource, aoData, fnCallback ) { 
                    $.getJSON( sSource, aoData, function (json) { 
                                
                    dis=json['iDisplayStart'];
                    fnCallback(json);
                });}  
    });
    $('.newRecords thead tr').find('th').eq(0).before('<th class="ui-state-default">No</th>'); //20120719 ayu
    $('.newRecords thead tr').find('th').eq(-1).after('<th class="ui-state-default" width="200px">Action</th>');
}

</script>